<template>
  <div id="detail">
    <com-head>详情</com-head>
    <div class="imgage" v-show="show">
      <img :src="img" alt="">
    </div>
    <div class="news">
      <div class="titleaa">{{title}}</div>
      <div class="timeaa">{{add_time}}</div>
      <p>{{content}}</p>
    </div>
    <com-foot :select="5"></com-foot>
  </div>
</template>

<script>
export default {
  name: 'detail',
  data () {
    return {
      status: this.$route.query.status,
      show:'',
      title: '',
      add_time: '',
      content: '',
      img:'',
      topmes:''
    };
  },
  created: function(){
			this.details(); 

    if (parseInt(this.status) === 0) {
				// 请求稿件详情
			this.gaojian();
    }else {
      // 请求详情
    }	
  } ,
  methods: {
    details(){
      this.show=true;
      this.topmes='推荐详情';
      this.axios.post('News/gonggaolist',{id: this.$route.query.id})
      .then((response) => {
        console.log(response);
          this.title=response.data.title;
          this.add_time=response.data.add_time;
          this.content=response.data.content;
          this.img=response.data.img;
      }).catch(function(error) {
          console.log(error);
      });
  },
  gaojian(){
    this.show=false;
    this.topmes='稿件详情';
    this.axios.post('Ball/manuscript_lists',{id: this.$route.query.id})
    .then((response) => {
      console.log(response);
        this.title=response.data.title;
        this.add_time=response.data.add_time;
        this.content=response.data.content;
    })
  }
}
};
</script>

<style lang="scss">
  #detail {
    padding-top: 67px;
    background: white;
    .imgage {
      padding: 20px;
      background: #f2f2f2;
      width: 100%;
      box-sizing: border-box;
      img {
        width: 100%;
      }
    }
    .news {
        width: 720px;
        padding: 0 10px;
        box-sizing: border-box;
        .titleaa {
          line-height: 54px;
          border-bottom: 1px solid #f2f2f2;
          font-size:30px;
          color:rgba(77,77,77,1);
          overflow : hidden;
					text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        .timeaa {
          font-size:20px;
          color:rgba(153,153,153,1)
        }
        p {
          text-indent: 2em;
          font-size:24px;
          color:rgba(102,102,102,1);
          line-height:44px;
          white-space:normal;
        }
    }
  }
</style>
